<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="电话" name="phone">
						<a-input v-model:value="searchFormState.phone" placeholder="请输入电话" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="姓名" name="userName">
						<a-input v-model:value="searchFormState.userName" placeholder="请输入姓名" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="性别" name="gender">
						<a-select v-model:value="searchFormState.gender" placeholder="请选择性别" :options="genderOptions" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="所属部门" name="orgId">
						<a-tree-select
							v-model:value="searchFormState.orgId"
							style="width: 100%"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择所属部门"
							allow-clear
							tree-default-expand-all
							:tree-data="treeData"
							:tree-default-expanded-keys="treeDefaultExpandedKeys"
							:field-names="{
										children: 'children',
										label: 'name',
										value: 'id'
									}"
							show-search
							tree-node-filter-prop="name"
						></a-tree-select>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="是否内部账号" name="innerAccount">
						<a-select v-model:value="searchFormState.innerAccount" placeholder="请选择是否内部账号" :options="innerAccountOptions" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.userId"
			:tool-config="toolConfig"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('appletUserAdd')">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
					<xn-batch-delete
						v-if="hasPerm('appletUserBatchDelete')"
						:selectedRowKeys="selectedRowKeys"
						@batchDelete="deleteBatchAppletUser"
					/>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)" v-if="hasPerm('appletUserEdit')">编辑</a>
						<a-divider type="vertical" v-if="hasPerm(['appletUserEdit', 'appletUserDelete'], 'and')" />
						<a-popconfirm title="确定要删除吗？" @confirm="deleteAppletUser(record)">
							<a-button type="link" danger size="small" v-if="hasPerm('appletUserDelete')">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="table.refresh(true)" />
</template>

<script setup name="appletuser">
	import Form from './form.vue'
	import appletUserApi from '@/api/biz/hidden/appletUserApi'
	import tool from "@/utils/tool";
	import bizUserApi from "@/api/biz/bizUserApi";
	let searchFormState = reactive({})
	const searchFormRef = ref()
	const table = ref()
	const formRef = ref()

	const innerAccountOptions = ref([{'value':'0','label':'否'},{'value':'1','label':'是'}])
	const genderOptions = ref([{'value':'0','label':'未知'},{'value':'1','label':'男'},{'value':'2','label':'女'}])

	// 机构选择器数据
	bizUserApi.userOrgTreeSelector().then((res) => {
		if (res !== null) {
			treeData.value = res
			// 默认展开2级
			treeData.value.forEach((item) => {
				// 因为0的顶级
				if (item.parentId === '0') {
					treeDefaultExpandedKeys.value.push(item.id)
					// 取到下级ID
					if (item.children) {
						item.children.forEach((items) => {
							treeDefaultExpandedKeys.value.push(items.id)
						})
					}
				}
			})
		}
	})

	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '姓名',
			dataIndex: 'userName',
			align:'center'
		},
		{
			title: '性别',
			dataIndex: 'gender',
			align:'center'
		},
		{
			title: '电话',
			dataIndex: 'phone',
			align:'center'
		},
		{
			title: '昵称',
			dataIndex: 'nickName',
			align:'center'
		},
		{
			title: '是否内部账号',
			dataIndex: 'innerAccount',
			align:'center'
		},
		{
			title: '组织机构名称',
			dataIndex: 'orgName',
			align:'center'
		},
		{
			title: '岗位名称',
			dataIndex: 'postName',
			align:'center'
		},
		{
			title: '平台用户ID',
			dataIndex: 'platformUserId',
			align:'center'
		},
	]
	// 操作栏通过权限判断是否显示
	if (hasPerm(['appletUserEdit', 'appletUserDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '150px'
		})
	}

	const loadData = (parameter) => {
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
		return appletUserApi.appletUserPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		table.value.refresh(true)
	}
	// 删除
	const deleteAppletUser = (record) => {
		let params = [
			{
				userId: record.userId
			}
		]
		appletUserApi.appletUserDelete(params).then(() => {
			table.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchAppletUser = (params) => {
		appletUserApi.appletUserDelete(params).then(() => {
			table.value.clearRefreshSelected()
		})
	}
</script>
